<form nz-form [formGroup]="formModel" (ngSubmit)="submitForm()">
  <div class="toolbar margin-bottom" [ngClass]="isMobile?'wrap-mobile':'wrap'">
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">合作伙伴</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择合作伙伴">
          <nz-select formControlName="agencyId" nzShowSearch nzAllowClear nzPlaceHolder="请选择合作伙伴"
                     (ngModelChange)="gainAgencyId($event)">
            <nz-option *ngFor="let item of agencyList" [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="10">选择查询</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择选择查询">
          <nz-radio-group id="type" formControlName="userIdType" (ngModelChange)="changeUserIdType($event)">
            <label nz-radio [nzValue]="1">主账号</label>
            <label nz-radio [nzValue]="2">子账号</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">{{userIdType == 1?'主账户':'子账户'}}</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择账户">
          <nz-select formControlName="userId" nzShowSearch nzAllowClear nzPlaceHolder="请选择账户">
            <nz-option *ngFor="let item of userList" nzLabel="{{item?.username}}   {{item?.name}}"
                       nzValue="{{item.id}}"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
<!--    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">-->
<!--      <nz-form-item>-->
<!--        <nz-form-label [nzSpan]="8" nzFor="name">子账号</nz-form-label>-->
<!--        <nz-form-control [nzSpan]="16">-->
<!--          <input type="text" id="memberId" nz-input formControlName="keyword" placeholder="请输入子账号关键字"/>-->
<!--        </nz-form-control>-->
<!--      </nz-form-item>-->
<!--    </div>-->
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6" class="margin-bottom"
         [ngClass]="isMobile? '': 'padding-left'">
      <button *ngIf="!isMobile" nz-button nzType="primary" class="button_search"><i nz-icon nzType="search"
                                                                                    nzTheme="outline"></i>查询
      </button>
      <button *ngIf="isMobile" nz-button nzBlock nzType="primary" class="button_search"><i nz-icon nzType="search"
                                                                                           nzTheme="outline"></i>查询
      </button>
    </div>

  </div>
</form>


<div [ngClass]="isMobile?'wrap-mobile':'wrap'">
  <div class="margin-bottom" *ngIf="userInfo.roleId == 1">
    <button nz-button nzType="primary" (click)="addStore()">
      <i nz-icon nzType="plus" nzTheme="outline"></i>添加
    </button>
  </div>

  <nz-table #nzTable [nzData]="listOfData" nzTableLayout="fixed"
            [(nzPageIndex)]="pageHelper.currentPage" [nzFrontPagination]="false"
            (nzPageIndexChange)="nzPageIndexChange($event)"
            [(nzPageSize)]="pageHelper.pageSize" [nzTotal]="pageHelper.totalItems"
            [nzScroll]="{ x: 'auto' }" [nzPageSizeOptions]="pageHelper.pageSizeOptions" nzShowSizeChanger (nzPageSizeChange)="onPageSizeChange($event)">
    <thead>
      <tr>
<!--        <th nzLeft></th>-->
        <th>管理账号</th>
        <th>微信登录</th>
        <th>负责人</th>
        <th>角色</th>
        <th>手机号</th>
        <th>场地</th>
        <th>设备</th>
        <th>合作伙伴</th>
        <th>注册时间</th>
        <th *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">操作</th>
        <th>账号状态</th>
        <th>冻结状态</th>
      </tr>
      </thead>
      <tbody>
      <ng-container *ngFor="let data of nzTable.data let index = index">
        <tr>
<!--          <td [(nzExpand)]="data.expand" nzLeft></td>-->
          <td nzEllipsis>
            <span *ngIf="data.username">{{ data.username }}</span>
          </td>
          <td nzEllipsis>
            <span *ngIf="data.openId"> <nz-tag nzColor="success">微信登录</nz-tag></span>
          </td>
          <td nzEllipsis>{{ data.principal }}</td>
          <td nzEllipsis>
            <ng-container *ngFor="let roleId of data.userRoleIdList">
              <div *ngIf="roleId == 2">合作伙伴</div>
              <div *ngIf="roleId == 3">运营商</div>
              <div *ngIf="roleId == 5">子账号</div>
              <div *ngIf="roleId == 6">财务</div>
              <div *ngIf="roleId == 7">员工</div>
            </ng-container>
          </td>
          <td nzEllipsis>{{ data.mobile }}</td>
          <!--        <td nzEllipsis *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR">-->
          <!--          <button [nzSize]="'small'" nz-button nzType="primary" (click)="clickReceiptType(data)">-->
          <!--            <span *ngIf="data.receiptType == 1">自有商户收款</span>-->
          <!--            <span *ngIf="data.receiptType == 2">平台商户收款</span>-->
          <!--          </button>-->
          <!--        </td>-->
          <td nzEllipsis><a (click)="skipStore(data)">{{data.storeCount}}</a></td>
          <td nzEllipsis>{{data.deviceOnLineCount}}/{{data.deviceCount}}</td>
          <td nzEllipsis>
            <a (click)="skipAgency(data)">
              <div>{{ data.agencyName }}</div>
              <div class="text-sm text-grey">{{ data.agencyNo}}</div>
            </a>
          </td>
          <td nzEllipsis>{{ data.createTime | date: 'yyyy-MM-dd HH:mm:ss'}}</td>
          <td nzEllipsis *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">
            <a *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR" style="margin-right: 10px" (click)="showMerchantUpdateModal(data)">福利限额</a>
            <a nz-dropdown [nzDropdownMenu]="menu">
              设置
              <i nz-icon nzType="down"></i>
            </a>
            <nz-dropdown-menu #menu="nzDropdownMenu">
              <ul nz-menu nzSelectable>
                <li nz-menu-item>
                  <a *ngIf="data.status == 0" (click)="lockUser(data,userStatus.LOCKED,'冻结账号',tplContent)">冻结</a>
                  <a *ngIf="data.status == 4 && (userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT)" nz-tooltip [nzTooltipTitle]="contentTemplate" (click)="lockUser(data,userStatus.ENABLED,'恢复账号',tplContent)">恢复</a>
                </li>
                <li nz-menu-item>
                  <a *ngIf="roleIdEnum.SUPER_ADMINISTRATOR == userInfo.roleId" (click)="resetPassword(data)">重置密码</a>
                </li>
                <li nz-menu-item>
                  <a *ngIf="roleIdEnum.SUPER_ADMINISTRATOR == userInfo.roleId" (click)="resetOperatePassword(data)">重置操作密码</a>
                </li>
              </ul>
            </nz-dropdown-menu>

            <ng-template #contentTemplate>
              <span *ngIf="data.freezeReason!=null">{{data.freezeReason}}</span>
              <span *ngIf="data.freezeReason==null">未知原因,请联系管理员</span>
            </ng-template>
          </td>
          <td nzEllipsis>
            <div *ngIf="data.status == 0" style="color: green">正常</div>
            <div *ngIf="data.status == 5" style="color: orange">注销</div>
            <div *ngIf="data.status != 5 && data.status != 0">其他</div>
          </td>
          <td nzEllipsis>
            <div *ngIf="data.lockStatus == 0 || !data.lockStatus">不锁</div>
            <div *ngIf="data.lockStatus == 1" style="color: red">锁住</div>
          </td>
        </tr>
<!--        <tr [nzExpand]="data.expand">-->
<!--          <nz-table #innerTable [nzData]="data.subAccountList" nzSize="middle" [nzShowPagination]="false" [nzScroll]="{ x: 'auto' }">-->
<!--          <thead>-->
<!--            <tr>-->
<!--              <th nzAlign="center" nzLeft>子账号</th>-->
<!--              <th nzAlign="center">负责人</th>-->
<!--              <th nzAlign="center">手机号</th>-->
<!--              <th nzAlign="center">场地数量</th>-->
<!--              <th nzAlign="center">场地名称</th>-->
<!--              <th nzAlign="center">注册时间</th>-->
<!--              <th nzAlign="center">操作</th>-->
<!--            </tr>-->
<!--          </thead>-->
<!--          <tbody>-->
<!--            <tr *ngFor="let data of innerTable.data">-->
<!--              <td nzEllipsis nzAlign="center" nzLeft>{{ data.username }}</td>-->
<!--              <td nzEllipsis nzAlign="center">{{ data.name }}</td>-->
<!--              <td nzEllipsis nzAlign="center">{{ data.mobile }}</td>-->
<!--              <td nzEllipsis nzAlign="center">{{ data.storeCount }}</td>-->
<!--              <td nzEllipsis nzAlign="center">{{ data.storeNames }}</td>-->
<!--              <td nzEllipsis nzAlign="center">{{ data.createTime | date: 'yyyy-MM-dd HH:mm:ss'}}</td>-->
<!--              <td nzEllipsis nzAlign="center">-->
<!--                <a nz-dropdown [nzDropdownMenu]="menu">-->
<!--                  设置-->
<!--                  <i nz-icon nzType="down"></i>-->
<!--                </a>-->
<!--                <nz-dropdown-menu #menu="nzDropdownMenu">-->
<!--                  <ul nz-menu nzSelectable>-->
<!--                    <li nz-menu-item>-->
<!--                      <a *ngIf="data.status == 0" (click)="lockUser(data,userStatus.LOCKED,'冻结账号',tplContent)">冻结</a>-->
<!--                      <a *ngIf="data.status == 4 && (userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT)" nz-tooltip [nzTooltipTitle]="contentTemplate" (click)="lockUser(data,userStatus.ENABLED,'恢复账号',tplContent)">恢复</a>-->
<!--                    </li>-->
<!--                    <li nz-menu-item>-->
<!--                      <a *ngIf="roleIdEnum.SUPER_ADMINISTRATOR == userInfo.roleId" (click)="resetPassword(data)">重置密码</a>-->
<!--                    </li>-->
<!--                    <li nz-menu-item>-->
<!--                      <a *ngIf="roleIdEnum.SUPER_ADMINISTRATOR == userInfo.roleId" (click)="resetOperatePassword(data)">重置操作密码</a>-->
<!--                    </li>-->
<!--                  </ul>-->
<!--                </nz-dropdown-menu>-->
<!--              </td>-->
<!--            </tr>-->
<!--          </tbody>-->
<!--          </nz-table>-->
<!--      </tr>-->
    </ng-container>
    </tbody>
  </nz-table>
</div>


<ng-template #tplContent let-params let-ref="modalRef">
  <nz-form-item>
    <nz-form-label [nzSpan]="5" nzFor="servicePhoneNo">冻结原因</nz-form-label>
    <nz-form-control [nzSpan]="16" nzHasFeedback nzErrorTip="请输入冻结原因!">
      <input nz-input onkeyup="this.value=this.value.replace(/^ +| +$/g,'')" [(ngModel)]="freezeReason"
             [ngModelOptions]="true" placeholder="冻结原因"/>
    </nz-form-control>
  </nz-form-item>
</ng-template>



<app-merchant-edit [isVisible]="isVisible" (emit)="setVisible($event)"></app-merchant-edit>

<app-merchant-update #merchantUpdateComponent [merchantUpdateVisible]="merchantUpdateVisible"
                     (settingMerchantUpdate)="settingMerchantUpdate($event)"></app-merchant-update>
